<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>支付页</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-size: 16px;
            color: #333;
        }

        a:link, a:visited, a:hover, a:active {
            text-decoration: none;
        }

        .lk0 {
            width: 100%;
            height: 16rem;
            background-color: #b583ff;
            border-bottom: 1rem solid #eee
        }

        .bcn1 {
            top: 5rem;
            left: 1rem;
            font-size: 1.5rem;
            color: #fff;
            text-align: center;
            padding: 1rem 0 1rem 0;
        }

        .lk2 {
            width: 100%;
            overflow: hidden;
            height: auto;
            padding-bottom: 3rem
        }

        .mx2 {
            width: 90%;
            margin: auto;
            overflow: hidden;
        }

        .nbd1 {
            height: 3rem;
            line-height: 3rem;
            border-bottom: 1px solid #eee;
            position: relative
        }

        .nbd2 {
            height: 3rem;
            line-height: 3rem;
            position: relative
        }

        .gh1 {
            float: right
        }

        .xb {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        .xb .gcn {
            background-color: #07c160;
            height: 3rem;
            display: block;
            width: 22rem;
            border-radius: 2rem;
            color: #fff;
            text-align: center;
            line-height: 3rem;
            margin: auto;
            font-size: 1.1rem
        }

        .zgf {
            width: 100%
        }

        .zgf ul li, .zgf ul {
            margin: 0;
            padding: 0
        }

        .zgf ul {
            list-style: none
        }

        .zgf ul li {
            display: block;
            float: left;
            width: 28%;
            border: 1px solid #fff;
            position: relative;
            border-radius: 8px;
            height: 8.75rem;
            margin-left: 1rem;
            background-color: #ffffff
        }

        .vcf {
            border-radius: 0 0 .75rem .75rem;
            width: 5rem;
            text-align: center;
            color: #fff;
            margin: auto;
            font-size: .8rem;
            padding: .1rem 0 .25rem 0;
            position: absolute;
            left: 50%;
            margin-left: -2.5rem;
            top: -1px;
            background: linear-gradient(90deg, #E041FF 0, #8A00F4 100%);
            height: 1rem;
        }

        .xcpp {
            text-align: center;
            font-size: 1.2rem;
            font-weight: 700;
            padding: 1.75rem 0 0 0
        }

        .xcpp2 {
            text-align: center;
            font-size: 2.4rem;
            font-weight: 700;
            padding: 0;
            color: #de9f49;
            line-height: normal;
        }

        .xcpp3 {
            text-align: center;
            font-size: .75rem;
        }

        .hgd {
            font-size: 1rem
        }

        .zgf ul li.active {
            border: 1px solid #7800f1;
            background: linear-gradient(261deg, #F5D8B1 0, #FEF2DF 100%);
        }

        .sp1.active {
            color: #07c160;
        }
    </style>
</head>
<body>
<div class="lk0">
    <div class="bcn1">VIP频道会员购买</div>
    <div class="zgf">
        <ul>
            <li class="active" data-price="v1">
                <div class="vcf"></div>
                <div class="xcpp">15天</div>
                <div class="xcpp2"><span class="hgd">￥</span>{$price.v1.price}</div>
                <div class="xcpp3">原价:{$price.v1.price_old}</div>
            </li>
            <li data-price="v2">
                <div class="vcf"></div>
                <div class="xcpp">1个月</div>
                <div class="xcpp2"><span class="hgd">￥</span>{$price.v2.price}</div>
                <div class="xcpp3">原价:￥{$price.v2.price_old}</div>
            </li>
            <li data-price="v3">
                <div class="vcf"></div>
                <div class="xcpp">3个月</div>
                <div class="xcpp2"><span class="hgd">￥</span>{$price.v3.price}</div>
                <div class="xcpp3">原价:￥{$price.v3.price_old}</div>
            </li>
        </ul>
    </div>
</div>
<div class="lk2">
    <div class="mx2">
        <label class="cell" for="wxpay">
            <div class="nbd1 div1">
                <span class="sp1 active">微信支付</span>
                <div class="gh1">
                    <input type="radio" name="radio" id="wxpay" data-type="1" checked/>
                </div>
            </div>
        </label>
        <label class="cell" for="alipay">
            <div class="nbd2 div1">
                <span class="sp1">支付宝支付</span>
                <div class="gh1">
                    <input type="radio" name="radio" id="alipay" data-type="2"/>
                </div>
            </div>
        </label>
    </div>
</div>
<div class="xb">
    <a href="javascript:" class="gcn btn_pay">立即支付</a>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/common.js?v={$Think.config.commonJs}"></script>
<script>
    app_test();

    var submitted = true;
    $(".btn_pay").click(function () {
        if (submitted) { //防止重复提交
            submitted = false;
            setTimeout(function () {
                submitted = true;
            }, 2000);

            //判断微信支付 或 邀请码支付
            var price = $('.zgf ul li.active').data("price");
            var radio = $('input:radio:checked');

            //生成支付订单
            $.ajax({
                url: '/app_pay',
                type: "POST",
                dataType: "json",
                data: {price: price, type: radio.data("type"), token: getUrlParam("token")},
                success: function (res) {
                    if (res.code == 200) {
                        var json = JSON.stringify(res.data);
                        console.log(json);
                        window.android._app_pay(json, radio.attr("id"));
                    } else {
                        alert(res.msg);
                    }
                }
            });
        }
    });

    $(".zgf ul li").click(function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });

    $(".div1").click(function () {
        $(".sp1").removeClass('active');
        $(this).find('.sp1').addClass('active');
    });

    function getUrlParam(name) {
        var query = window.location.search.substring(1);
        var param_arr = query.split("&");
        for (var i = 0; i < param_arr.length; i++) {
            var pair = param_arr[i].split("=");
            if (pair[0] == name) {
                return pair[1];
            }
        }
        return (false);
    }
</script>
</body>
</html>